<template>
    <div>
        <h2 align="center">非父子组件的数据传递</h2>
        <div class="content">
            <user :user="user"></user>
            <i class="bi bi-arrow-left-right" style="font-size: 80px;color: blue;"></i>
            <user :user="user2"></user>
        </div>
    </div>
</template>

<script>
import User from './User.vue';
import software2351 from '@/assets/images/a.jpg';
import software2352 from '@/assets/images/b.jpg';
    export default {
        data(){
            return{
            user:{
                id:'s2351',
                name:'软件2351',
                img:software2351,
                friend:"software2352"
            },
            user2:{
                id:'s2352',
                name:'软件2352',
                img:software2352,
                friend:"software2351"
            }
        }
        },
        components:{
            User,
        }
    }
</script>

<style lang="scss" scoped>
.content{
    display: flex;
    justify-content:space-around;
    align-items: center;
}
</style>